<template>
    <div class="process-monitoring-box">
        <commpVxeTable
         :config="dataTableConfig" 
         :columns="columnsVxe" 
         :formItem="formItem"
         ref="acceptanceRegistrationRef"
         @searchEvent="searchEvent"
         @resetEvent="resetEvent"
         :isCanWrap="true"
         > 
            <template v-slot:externalOperations="{row}">
                <vxe-form-item>
                    <template>
                        <a-button class="blue-btn" @click="exportClick">导出</a-button>
                    </template>
                </vxe-form-item>
            </template>
            <template v-slot:fsxmc_name="{row}" data-desc="自定操作栏">
                <span v-if="row.fzwxtbzzt == '补正中'" class="fsxmcQ-c-t">[{{ row.fzwxtbzzt}}]</span>
                <span v-if="row.fzwxtbzzt == '已补正'" class="fsxmcQ-l-t">[{{ row.fzwxtbzzt}}]</span>

                <span v-if="row.fzwxtzgzt == '整改中'" class="fsxmcQ-c-t">[{{ row.fzwxtzgzt }}]</span>
                <span v-if="row.fzwxtzgzt == '已整改'" class="fsxmcQ-l-t">[{{ row.fzwxtzgzt }}]</span>

                <span v-if="row.fzwxtcjzt == '撤件回复'" class="fsxmcQ-h-t" @click="cjhfClick()">[{{ row.fzwxtcjzt }}]</span>
                <span v-if="row.fzwxtcjzt == '撤件审核中'" class="fsxmcQ-c-t">[{{ row.fzwxtcjzt }}]</span>
                <span v-if="row.fzwxtcjzt == '已撤件'" class="fsxmcQ-l-t">[{{ row.fzwxtcjzt }}]</span>

                <span v-if="row.fzwxtthzt" class="fsxmcQ-h-t">{{ row.fzwxtthzt }}</span>
                <span>{{ row.fsxmc }}</span>
            </template>
            <template v-slot:fsqfl_ss_name="{data}">
                <div style="display: flex;" :style="{width:data.widthString}" >
                    <a-select
                        mode="multiple"
                        size="default"
                        :default-value="mcData.fsqfl"
                        placeholder="请选择申请分类"
                        style="flex: 1;"
                        @change="$event=>{multipleChoiceChange($event,'fsqfl')}"
                    >
                        <a-select-option key="临床前研究立项">临床前研究立项</a-select-option>
                        <a-select-option key="临床试验">临床试验</a-select-option>
                        <a-select-option key="生产与配制">生产与配制</a-select-option>
                    </a-select>
                </div>
            </template>
            <template v-slot:fzcfl_ss_name="{data}">
                <div style="display: flex;" :style="{width:data.widthString}" >
                    <a-tree-select
                        show-search
                        style="width: 100%"
                        :value="mcData.fsqfl"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                        placeholder="请选择注册分类"
                        allow-clear
                        multiple
                        tree-default-expand-all
                        @change="$event=>{multipleChoiceChange($event,'fsqfl')}"
                    >
                        <a-tree-select-node key="药品" value="药品" title="药品">
                            <a-tree-select-node key="化学药品" value="化学药品" title="化学药品"></a-tree-select-node>
                            <a-tree-select-node key="中药" value="中药" title="中药"></a-tree-select-node>
                            <a-tree-select-node key="天然药物" value="天然药物" title="天然药物"></a-tree-select-node>
                            <a-tree-select-node key="生物制品" value="生物制品" title="生物制品"></a-tree-select-node>
                        </a-tree-select-node>
                        <a-tree-select-node key="医疗卫生用品" value="医疗卫生用品" title="医疗卫生用品">
                            <a-tree-select-node key="医疗器械" value="医疗器械" title="医疗器械"></a-tree-select-node>
                            <a-tree-select-node key="其他" value="其他" title="其他"></a-tree-select-node>
                        </a-tree-select-node>
                    </a-tree-select>
                </div>
            </template>
            <template v-slot:fqwfl_ss_name="{data}">
                <div style="display: flex;" :style="{width:data.widthString}" >
                    <a-select
                        mode="multiple"
                        size="default"
                        :default-value="mcData.fqwfl"
                        placeholder="请选择勤务分类"
                        style="flex: 1;"
                        @change="$event=>{multipleChoiceChange($event,'fqwfl')}"
                    >
                        <a-select-option v-for="(item,index) in qwOption" :key="item.value">{{ item.label }}</a-select-option>
                    </a-select>
                </div>
            </template>
            <template v-slot:name_fslsj="{row}" data-desc="自定操作栏">
                <span>{{ timeProcessing(row.fslsj) }}</span>
            </template>
            <template v-slot:name_fcykssj_fcyjssj="{row}" data-desc="自定操作栏">
                <span>{{ timeProcessing(row.fcykssj) }}--{{ timeProcessing(row.fcyjssj) }}</span>
            </template>
            <template v-slot:name_ffssj="{row}" data-desc="自定操作栏">
                <span>{{ row.ffssj }}</span>
            </template>
        </commpVxeTable>
    </div>
</template>
<script>
import assessCheckApi from './service/api'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import blobType from '@/common/blobType'
import moment from 'moment'
import { spcyStattyCxtjExport, } from './service/index'
export default {
    components:{
        commpVxeTable
    },
    props:{

    },
    data(){
        return{
            formItem:[
                {
                    label: '事项名称',
                    model: 'fsxmc',
                },{
                    label: '企业名称',
                    model: 'fqymc',
                },{
                    label: '产品名称',
                    model: 'fcpmc',
                },{
                    label: '任务编号',
                    model: 'fslbh',
                },
                // {
                //     label: '审评类型',
                //     model: 'fjclx',
                //     separateAreas: 'jclx'+blobType.fywflcodeArr[blobType.menuType.indexOf(this.$route.name.substring(this.$route.name.indexOf('__'),this.$route.name.indexOf('_a')+2))],
                //     dictionaryType:'检查类型',
                //     type:'Select'
                // },{
                //     label: '环节名称',
                //     model: 'fhjmc',
                //     separateAreas: 'spcylchj'+blobType.fywflcodeArr[blobType.menuType.indexOf(this.$route.name.substring(this.$route.name.indexOf('__'),this.$route.name.indexOf('_a')+2))],
                //     dictionaryType:'环节名称',
                //     type:'Select'
                // },{
                //     label: '任务类型',
                //     model: 'frwlx',
                //     dictionaryType:'任务类型代码',
                //     type:'Select'
                // },
                {
                    label: '查验时间',
                    model: ['fcykssj','fcyjssj'],
                    type: 'rangePicker',
                    format: 'YYYY-MM-DD',
                },{//申请分类
                    label: '申请分类',
                    model: 'fsqfl',
                    slotName:'fsqfl_ss_name'
                },{//注册分类
                    label: '注册分类',
                    model: 'fzcfl',
                    slotName:'fzcfl_ss_name'
                },{//勤务分类
                    label: '勤务分类',
                    model: 'fqwfl',
                    slotName:'fqwfl_ss_name'
                }

            ],
            columnsVxe:[
            { 
                type: 'checkbox', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '事项名称', //列头显示文字
                field: 'fsxmc',
                slots: {
                    default: 'fsxmc_name',
                },
                fixed: 'left',
            },{
                title: '企业名称', //列头显示文字
                field: 'fqymc',
            },{
                title: '产品名称',
                field: 'fcpmc',
            },{
                title: '申请分类',
                field: 'fsqfl',
            },{
                title: '注册分类',
                field: 'fzcfl',
            },{
                title: '勤务分类',
                field: 'fqwfl',
            },{
                title: '审评时间',
                field: 'fcykssj',
                slots: {
                        // 使用插槽模板渲染
                        default: 'name_fcykssj_fcyjssj',
                    },
            },{
                title: '审评结果',//（还没换字段）
                field: 'fzhjg',
            }],
            dataTableConfig:{
                api: assessCheckApi.list,
                rowId: 'jobid',
                fywflcode:blobType.fywflcodeArr[blobType.menuType.indexOf(this.$route.name.substring(this.$route.name.indexOf('__'),this.$route.name.indexOf('_a')+2))],
                paramet:{
                }
            },
            inspectionTime:[],
            mcData:{
                fsqfl:[],
                fzcfl:[],
                fqwfl:[],
            },
            qwOption:[{label:'核*WUQI*损伤防治药物',value:'核*WUQI*损伤防治药物'},
                {label:'化学*WUQI*损伤防治药物',value:'化学*WUQI*损伤防治药物'},
                {label:'生物*WUQI*损伤防治药物',value:'生物*WUQI*损伤防治药物'},
                {label:'*ZHAN*伤止血与止痛药',value:'*ZHAN*伤止血与止痛药'},
                {label:'*ZHAN*时烧伤治疗药物',value:'*ZHAN*时烧伤治疗药物'},
                {label:'*ZHAN*伤愈合药物',value:'*ZHAN*伤愈合药物'},
                {label:'爆炸伤防治药物',value:'爆炸伤防治药物'},
                {label:'*ZHAN*斗应激防治药物',value:'*ZHAN*斗应激防治药物'},
                {label:'热环境因素对人体损伤防治药物',value:'热环境因素对人体损伤防治药物'},
                {label:'寒冷环境因素对人体损伤防治药物',value:'寒冷环境因素对人体损伤防治药物'},
                {label:'高原环境因素对人体损伤防治药物',value:'高原环境因素对人体损伤防治药物'},
                {label:'航空航天环境因素对人体损伤防止药物',value:'航空航天环境因素对人体损伤防止药物'},
                {label:'航海和潜水环境因素对人体损伤的防治药物',value:'航海和潜水环境因素对人体损伤的防治药物'},
                {label:'海水浸泡伤防治药物',value:'海水浸泡伤防治药物'},
                {label:'*ZHAN*时皮肤病防治药物',value:'*ZHAN*时皮肤病防治药物'},
                {label:'推进剂中毒防治药物',value:'推进剂中毒防治药物'},
                {label:'微波辐射损伤防治药物',value:'微波辐射损伤防治药物'},
                {label:'噪声性听觉损伤防治药物',value:'噪声性听觉损伤防治药物'},
                {label:'新概念*WUQI*伤防治药物',value:'新概念*WUQI*伤防治药物'},
                {label:'*JUNSHI*训练伤防治药物',value:'*JUNSHI*训练伤防治药物'},
                {label:'*JUNYONG*睡眠调节药物',value:'*JUNYONG*睡眠调节药物'},
                {label:'抗运动病药物',value:'抗运动病药物'},
                {label:'*JUNYONG*功能营养剂',value:'*JUNYONG*功能营养剂'},
                {label:'诊断和侦检试剂',value:'诊断和侦检试剂'},
                {label:'驱避消毒杀虫剂',value:'驱避消毒杀虫剂'},
                {label:'卫生敷料',value:'卫生敷料'},
                {label:'个人卫生防护用品',value:'个人卫生防护用品'},
            ],
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        cjhfClick(){
            this.$route.push('/enterpriseWithdrawalApplication/index')
        },
        timeProcessing(val){
            if(val){
                val = val.slice(0,11)
            }
            return val
        },
        searchEvent(){
            //console.log(this.inspectionTime)
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
                fsqfl:this.mcData.fsqfl.length?this.mcData.fsqfl.join(','):'',
                fzcfl:this.mcData.fzcfl.length?this.mcData.fzcfl.join(','):'',
                fqwfl:this.mcData.fqwfl.length?this.mcData.fqwfl.join(','):'',
            }
            //console.log(this.dataTableConfig.paramet)
        },
        resetEvent(){
            this.inspectionTime = []
            this.mcData = {
                fsqfl:[],
                fzcfl:[],
                fqwfl:[],
            }
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
                fsqfl:'',
                fzcfl:'',
                fqwfl:'',
            }

        },
        multipleChoiceChange(value,key){
            //console.log(value)
            this.mcData[key] = value
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
                fsqfl:this.mcData.fsqfl.length?this.mcData.fsqfl.join(','):'',
                fzcfl:this.mcData.fzcfl.length?this.mcData.fzcfl.join(','):'',
                fqwfl:this.mcData.fqwfl.length?this.mcData.fqwfl.join(','):'',
            }
            this.$refs.acceptanceRegistrationRef.searchEvent()
        },
        exportClick(){ 
            let that = this
            let fileName = '查询统计表'
            spcyStattyCxtjExport(this.dataTableConfig.paramet).then((data) => {
                // //console.log(data)
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                    window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
                } else {
                    let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName + '.xls')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                }
            })
        },
    }
}
</script>